<template>
  <div ref='editor'></div>


  <button @click='syncHTML'>同步内容</button>
  <div :innerHTML='content.html'></div>
</template>

<script>
import {onMounted, onBeforeUnmount, ref, reactive} from 'vue';
import WangEditor from 'wangeditor';

export default {
  name: 'app',
  setup() {

    const editor = ref();



    const content = reactive({
      html: '',
      text: '',
    });
    let instance;


    onMounted(() => {
      instance = new WangEditor(editor.value);


      Object.assign(instance.config, {
        onchange() {
          console.log('change');
        },
        placeholder: "请开始写笔记",
        showMenuTooltips: true,
        menuTooltipPosition: 'down'


      });


      instance.create();
    });


    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });


    const syncHTML = () => {
      content.html = instance.txt.html();
    };


    return {
      syncHTML,
      editor,
      content,
    };
  },
};
</script>